<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HelloWorld</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>Mixins</h1>
    <hr>
    <div id="app">
        <p>{{num}}</p>
       <button @click="add">add</button>
    </div>
    
   
    <script type="text/javascript">
        //执行顺序
        //全局第一
        //混入第二
        //原生第三


        var addConsole={
            //updated 是生命周期
            updated:function(){
                console.log('数据发生变化,变为:'+this.num);
            }
        };

        Vue.mixin({
            updated:function(){
                console.log('我是全局的');
            }
        });

        var app=new Vue({
            el:'#app',
            data:{
                temp:14,
                cloth:'夹克,长裙',
                num:1
            },
            methods:{
                add:function(){
                    this.num++;
                }
            },
            updated:function(){
                //混入的先执行,原生的后执行
                console.log("我是原生的");
            },
            mixins:[
                addConsole
            ]
        })
    </script>
  
</body>
</html>